<template>
  <div class="class-dialog">
    <div class="overlay"></div>
    <div class="dialog-wrapper">
      <div class="dialog-close flex-center" @click="closeDialog">
        <zl-icon
          class="dialog-close-icon"
          icon="icon-guanbi"
          :icon-style="{ width: '20px', height: '20px' }"
        ></zl-icon>
      </div>
      <div class="dialog-content">
        <div class="dialog-title">本节课程评分</div>
        <div class="dialog-main-text">
          老师讲得怎么样?
        </div>
        <div class="dialog-sub-text">
          以推荐给好友的意愿为打分标准，1-10分，您打几分？
        </div>
        <ul class="score-list flex-center-wrap flex-justify-between">
          <li
            @click="toScore(index + 1)"
            v-for="(item, index) in levelList"
            :key="index"
            class="score-item flex-center"
            :class="{ 'score-item-active': activeScoreNum === index + 1 }"
          >
            {{ index + 1 }}
          </li>
        </ul>
        <div>
          <!-- <div v-if="!activeScoreNum" class="score-text flex-center-wrap flex-justify-between">
            <div>一般，不值得推荐</div>
            <div>不错，值得推荐</div>
          </div> -->
          <div
            class="flex-center active-score-text"
            :style="{ visibility: activeScoreNum ? 'visible' : 'hidden' }"
          >
            <div v-if="!isRecommend">一般，不值得推荐</div>
            <div v-else>不错，值得推荐</div>
          </div>
        </div>
        <el-input
          v-model="content"
          class="feedback-content"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 4 }"
          resize="none"
          maxlength="300"
          show-word-limit
          :placeholder="
            '评价下本节课吧！\n“本节评价”是为了提高老师讲课质量，不进行展示。\n感谢您的反馈！'
          "
        ></el-input>
        <div class="flex-center mt20">
          <button
            class="submit-btn"
            :class="{ 'btn-disabled': isEmpty }"
            @click="sumitGrade"
          >
            提交
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { videoComment } from '@/api/play'
import zlIcon from '@/components/zlIcon.vue'
export default {
  data() {
    return {
      // 当前选中的数字
      activeScoreNum: '',
      // 是否推荐
      isRecommend: false,
      // 表单输入数据
      content: ''
    }
  },
  components: {
    'zl-icon': zlIcon
  },
  computed: {
    levelList() {
      return Array.from({ length: 10 })
    },
    // 当前课程视频信息
    courseVdieoInfo() {
      return this.$store.state.play.courseVdieoInfo || {}
    },
    // 播放中的课节
    playingSection() {
      return this.$store.state.play.playingSection || {}
    },
    // 当前权限选中的信息
    selectInfo() {
      return this.$store.state.play.selectInfo || {}
    },
    // 当前播放位置
    currentTime() {
      return this.$store.state.play.currentTime
    },
    isEmpty() {
      return !this.activeScoreNum
    }
  },
  methods: {
    // 评分
    toScore(val) {
      this.activeScoreNum = val
      if (val >= 6) {
        this.isRecommend = true
      } else {
        this.isRecommend = false
      }
    },
    // 关闭弹窗
    closeDialog() {
      this.$store.dispatch('play/toggleGradeDialog', false)
    },
    // 提交评价
    sumitGrade() {
      let { video_id } = this.playingSection
      let { teacher_id, course_id, course_section_id } = this.selectInfo
      if (!this.activeScoreNum)
        return this.$message.warning('您还未选择评分哟~')
      let params = {
        from: 'web',
        class_id: '0',
        course_id,
        course_section_id,
        video_id,
        teacher_id,
        comment_star: this.activeScoreNum,
        comment_content: this.content,
        video_time: this.currentTime
      }
      if (!params.course_section_id) {
        return this.$message({
          type: 'error',
          message: '请选择要评分的课节'
        })
      }
      videoComment(params)
        .then(res => {
          // 评分失败
          if (+res.errcode !== 0) {
            this.$message({
              type: 'error',
              message: res.errmsg
            })
            return
          }
          // 评分成功
          this.$message({
            type: 'success',
            message: '评分成功'
          })
          this.closeDialog()
        })
        .catch(() => {})
    }
  }
}
</script>
<style scoped>
.mt20 {
  margin-top: 20px;
}
.class-dialog {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.overlay {
  position: absolute;
  z-index: 9;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}
.dialog-wrapper {
  position: absolute;
  z-index: 9;
  top: 50%;
  left: 50%;
  width: 550px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 12px;
  background: #fff;
}
.dialog-content {
  padding: 30px 30px 20px;
}
.dialog-title {
  height: 30px;
  line-height: 30px;
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  color: #383838;
}
.dialog-main-text {
  height: 22px;
  line-height: 22px;
  margin-bottom: 10px;
  font-size: 16px;
  color: #383838;
}
.dialog-sub-text {
  height: 20px;
  line-height: 20px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
}
.score-list {
  margin-bottom: 10px;
}
.score-item {
  width: 40px;
  height: 50px;
  background-color: #f7f7f7;
  color: #383838;
  border-radius: 4px;
  cursor: pointer;
}
.score-item-active {
  color: #ffffff;
  background-color: #3480ff;
}
.score-text {
  color: #9fa6b3;
}
.active-score-text {
  height: 16px;
  line-height: 16px;
  font-size: 14px;
  font-weight: 400;
  color: #3480ff;
  text-align: center;
}
.feedback-content {
  margin-top: 20px;
}
.dialog-close {
  position: absolute;
  z-index: 9;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
.dialog-close-icon {
  font-size: 24px;
  color: #999999;
}
.dialog-close-icon:hover {
  color: #666666;
}
.submit-btn {
  width: 86px;
  height: 32px;
  background: #3480ff;
  border-radius: 18px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}
.btn-disabled {
  background: #d9d9d9;
  cursor: not-allowed;
}
.class-dialog /deep/ .el-textarea__inner {
  padding: 15px 20px;
  border-radius: 8px;
  border: 1px solid #f0f1f2;
  color: #383838;
}
.class-dialog /deep/ .el-textarea__inner::placeholder {
  color: #999999;
}
</style>
